<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单评价</title>
    <link rel="stylesheet" href="/css/supplies/bootstrap.min.css">
    <link rel="stylesheet" href="/icon/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/supplies/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/supplies/common.css"/>
    <link rel="stylesheet" href="/css/supplies/myOrder/myorder.css">
    <style>
        #list_comment {
            margin-top: 10px;
        }

        .title {
            float: left;
            width: 100px;
            margin-right: 20px;
        }

        .select_a {
            height: 32px;
            line-height: 30px;
        }

        .page {
            margin-right: 10px;
        }

        .bottom-right {
            margin-right: 20px;
        }

        ul li label {
            margin-right: 20px;
        }

        .active-bg-color {
            color: #FF6A0E;
        }

        li .label {
            position: relative;
            border: 1px solid #DEDEDE;
            background-color: white;
            height: 44px;
            min-width: 160px;
            font-weight: 100;
            font-size: 14px;
            color: #999999;
            line-height: 17px;
            padding: 3px 10px;
            text-align: left;
        }
        .fa-caret-down{
            position: absolute;
            color: #666;
            margin: 0;
            font-size: 20px;
            top: 10px;
            right: 10px;
        }
        .star-top {
            margin-top: 20px;
        }

        .select_a {
            height: 32px;
            width: 140px;
            font-size: 14px;
            line-height: 30px;
        }

        .star-top .time {
            margin-top: 10px;
            margin-right: 20px;
            float: left;
        }

        #evaluation_order_list {
            margin-left: 10px;
        }

        .border-bottom-s {
            border-bottom: 1px solid #eee;
        }

        .form-group {
            float: left;
        }

        .comment {
            font-size: 14px;
            margin-top: 15px;
            margin-right: 30px;
            word-wrap: break-word;
        }

        .v-time {
            margin-top: 5px;
        }

        .v-star {
            float: left;
            margin-top: -23px;
            margin-left: 80px;
        }

        .fa-true {
            color: #FF6A0E;
        }

        .fa-em {
            color: #eee;
        }

        label {
            font-weight: 200;
        }

        /* 选择背景颜色 */
        .activeSelected {
            color: #FF6A0E;
        }

        label {
            font-weight: 200;
        }

        .activeSelected {
            background-color: white;
        }

        .floatright {
            float: right;
        }

        .img-circle {
            width: 44px;
            height: 44px;
        }

        .border-b {
            padding-bottom: 15px;
            border-bottom: 2px solid #e8e8e8;
        }

        .data-left {
            float: left;
            margin-top: 15px;
        }

        .data-left img {
            float: left;
        }

        .data-left-text {
            float: left;
            margin-left: 10px;
        }

        .data-right {
            float: right;
            margin-top: 15px;
        }

        .pagearea {
            width: auto;
            padding-top: 0px;
            padding-bottom: 0px;
            padding: 0px;
            padding-right: 20px;
        }
    </style>
</head>
<body>
<div id="list_comment">
    <div class="form-body">
        <form id="choose">
            <div class="row ">
                <div class="col-lg-3 col-sm-3 " style="width: 220px;">
                    <div class="font-size-14">分类（可多选）<br>classification
                    </div>
                </div>
                <ul>
                    <li>
                        <label class="check-btn  col-lg-2 col-sm-2 b label ">
                            类别选择</br>type selection<span class="fa fa-caret-down" id="span1"></span>
                        </label>
                        <div id="triangle1"></div>
                        <div class="hidDiv" id="category">
                            <div class="category_checkbox form-inline">
                                <label class="b" v-for="v in cateData">
                                    <input type="checkbox" :value="v.id" class="form-group" />
                                    <span class="form-group font_size_14 " v-on:click="setCheckboxSelect($event,v,1)">{{v.name}}</br>{{v.name_english}}</span>
                                </label>
                            </div>
                            <div class="select_a yesBtn btn-2" @click="categorySubmit()">确定(determine)</div>
                        </div>
                    </li>
                    <li>
                        <label class="check-btn   col-lg-2 col-sm-2 b label">
                            种类选择</br>product type selection<span class="fa fa-caret-down " id="span2"></span>
                        </label>
                        <div id="triangle2"></div>
                        <div class="hidDiv" id="type">
                            <div class="category_checkbox form-inline">
                                <label class="b" v-for="v in kindData">
                                    <input type="checkbox" :value="v.id" class="form-group"/>
                                    <span class="form-group font_size_14" v-on:click="setCheckboxSelect($event,v,2)">{{v.name}}</br>{{v.name_english}}</span>
                                </label>
                            </div>
                            <div class="select_a yesBtn btn-2" @click="typeSubmit()" id="typeSubmit">确定(determine)</div>
                        </div>
                    </li>
                    <li>
                        <label class="check-btn   col-lg-2 col-sm-2 b label">
                            品类选择</br>category selection<span class="fa fa-caret-down " id="span3"></span>
                        </label>
                        <div id="triangle3"></div>
                        <div class="hidDiv" id="small_type">
                            <div class="category_checkbox form-inline">
                                <label class="b" v-for="v in smallTypeData">
                                    <input type="checkbox" :value="v.id" class="form-group" />
                                    <span class="form-group font_size_14" v-on:click="setCheckboxSelect($event,v,3)">{{v.name}}</br>{{v.name_english}}</span>
                                </label>
                            </div>
                            <div class="select_a yesBtn btn-2" @click="smallTypeSubmit()">确定(determine)</div>
                        </div>
                    </li>
                    <li>
                        <label class="check-btn   col-lg-2 col-sm-2 b label">
                            品牌选择</br>brand selection<span class="fa fa-caret-down " id="span4"></span>
                        </label>
                        <div id="triangle4"></div>
                        <div class="hidDiv" id="brand">
                            <div class="category_checkbox form-inline">
                                <label class="b" v-for="v in brand">
                                    <input type="checkbox" :value="v.id" class="form-group" />
                                    <span class="form-group font_size_14" v-on:click="setCheckboxSelect($event,v,4)">{{v.name_english}}</span>
                                </label>
                            </div>
                            <div class="select_a yesBtn btn-2 ">确定(determine)</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="clear: both;margin-top: 20px"></div>
            <div class="floatright">
                <button class="bnt-left btn-2" type="button" @click="req()"
                        style="width: 100px;margin-right: 20px;border: 0">
                    查找search
                </button>
                <button class="btn-2" type="reset" @click="reset()" style="width: 100px;border: 0">
                    重置reset
                </button>
            </div>
            <div style="clear: both;margin-top: 20px;padding-top: 20px"></div>
        </form>
    </div>
    <div class="form-body ">
        <div class="border-b">
            <div class="row text-align  color-6" id="tr">
                <div class="title " @click="category($event,'All')">
                    <div class=" b activeSelected">
                        <div>全部</div>
                        <div>all</div>
                    </div>
                </div>
                <div class="title b" @click="category($event,'new')">
                    <div>最新</div>
                    <div>latest</div>
                </div>
                <div class="title b" @click="category($event,'low')">
                    <div>低分</div>
                    <div>low score</div>
                </div>

                <div class="pagearea">
                    <img src="/image/supplies/page_lower.png" @click="nextPage($event)">
                    <img src="/image/supplies/page_upper.png" style="margin-right: 10px" @click="upPage($event)">
                    <div class="page-total margin-right ">共0条记录 <br>
                        <div class="color-9">total 0 records</div>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div>
            <div id="evaluation_order_list" v-loading="loading">
                <div class="border-bottom-s" v-for="vo in items">
                    <div class="data-left">
                        <img class="img-circle " src="/image/supplies/myorder/food1.png">
                        <div class="data-left-text">
                            <div class="font_size_16">{{vo.name}}</div>
                            <div class="font_size_14 color-6 v-time" v-text="getTimeFormat(vo.time)"></div>
                            <div class="v-star" v-html="serStarId(vo.star)"></div>
                        </div>
                    </div>
                    <div class="data-right">
                        <div>{{vo.addr}}</div>
                        <div class="color-6">{{vo.addr_english}}</div>
                    </div>
                    <div style="clear: both"></div>

                    <div class="bottom comment color-6"> {{vo.comment}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-body-footer "></div>

</body>
<script src="/js/supplies/jquery.min.js"></script>
<script src="/js/supplies/bootstrap.min.js"></script>
<script src="/js/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/supplies/common.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script rel="script" src="/js/supplies/axios.js"></script>
<script>
    $(function () {
        intiBnt();
    });
    /*
     * @description : 获取评价列表
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/31 10:29
     */
    var app = new Vue({
        el: "#list_comment",
        data: {
            items: [],
            searchs:
                {score: '',
                    category: '',
                    kind: '',
                    smallType: '',
                    brand: '',
                    date: '',
                    supplier_id:'',
                    page: '1'},
            value: 1,
            cateData:'',
            kindData:'',
            smallTypeData:'',
            brand:'',
            info: '',
            maxPage: '',
            cate1:'',
            type2:'',
            small_type3:'',
            brand4:'',
            loading: true
        },
        methods: {
            req:function () {
                this.loading = true;
                this.searchs.category       = boxCombStr('#category');
                this.searchs.kind           = boxCombStr('#type');
                this.searchs.smallType      = boxCombStr('#small_type');
                this.searchs.brand          = boxCombStr('#small_type');
                this.searchs.supplier_id    = localStorage.getItem('suppliesId');
                //console.log("sss == " +this.searchs.category)
                var url = '__APP__/apishop/index/getCommentList';
                this.$http.post(url, this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    this.maxPage = res.body['maxPage'];
                    this.items = res.body['list'];
                    $str = "共" + res.body['count'] + "条记录 " + "<br/>" + "total" + res.body['count'] + " records";
                    $('.page-total').html($str);
                    this.loading = false;
                }, function (res) {

                });
            },
            ini:function () {
                var id  = localStorage.getItem('suppliesId');
                var url = '__APP__/apishop/Product/getAllProductType';
                this.$http.post(url, id, {
                    emulateJSON: true
                }).then(function (res) {
                    this.cateData = res.data.category;
                }, function (res) {

                });
            },
            categorySubmit:function(){
                var url = '__APP__/apishop/apishop/getBaseData';
                var categoryIds = boxCombStr('#category');//获取类别值
                this.$http.post(url, {ids:categoryIds}, {
                    emulateJSON: true
                }).then(function (res) {
                    if(200==res['status']){
                        this.kindData = res['body'].data;
                    }else{

                    }
                }, function (res) {

                });
            },
            typeSubmit:function(){
                var url = '__APP__/apishop/apishop/getBaseData';
                var categoryIds = boxCombStr('#type');//获取类别值
                if(!categoryIds.length == 0){
                    this.$http.post(url, {ids:categoryIds}, {
                        emulateJSON: true
                    }).then(function (res) {
                        if(200==res['status']){
                            this.smallTypeData = res['body'].data;

                        }else{

                        }
                    }, function (res) {

                    });
                }
            },
            smallTypeSubmit:function(){
                var url = '__APP__/apishop/apishop/getBaseData';
                var categoryIds = boxCombStr('#small_type');//获取类别值
                if(!categoryIds.length == 0){
                    this.$http.post(url, {ids:categoryIds}, {
                        emulateJSON: true
                    }).then(function (res) {
                        if(200==res['status']){
                            this.brand = res['body'].data;
                        }else{

                        }
                    }, function (res) {

                    });
                }
            },
            reset: function () {
                this.searchs.category = '';//获取类别值
                this.searchs.kind = '';//获取种类值
                this.searchs.smallType = '';//获取品类值
                this.searchs.brand = '';//获取品牌值
                $("#choose").find("input").each(function () {
                    $(this).prop("checked",false) ;
                    $(this).next().removeClass("active-bg-color");
                });
                this.req();
            },
            setCheckboxSelect: function (event,v,type) {
                var status = $(event.currentTarget).prev().prop("checked");
                if (status) {

                    $(event.currentTarget).removeClass("active-bg-color");
                } else {
                    $(event.currentTarget).addClass("active-bg-color");
                }
            },
            category: function (event, type) { //
                $("#tr").find("div").each(function () {
                    $(this).removeClass("activeSelected");
                });
                $(event.currentTarget).addClass("activeSelected");
                switch (type) {
                    case "All": //全部
                        this.searchs.date = '';
                        this.searchs.score = '';
                        this.searchs.category = '';
                        this.searchs.kind = '';
                        this.searchs.smallType = '';
                        this.searchs.brand = '';
                        break;
                    case "new":// 最新
                        this.searchs.date = 3;
                        this.searchs.score = '';
                        break;
                    case "low"://最低
                        this.searchs.score = 3;
                        this.searchs.date = '';
                        break;
                    default:
                        this.searchs = '';
                        break;
                }
                this.searchs.page = 1;
                this.req();
            },
            upPage: function () {
                this.searchs.page--;
                if (this.searchs.page < 1) {
                    this.searchs.page = 1;
                    return;
                }
                this.req();
            },
            nextPage: function () {
                this.searchs.page++;
                if (this.searchs.page > this.maxPage) {
                    this.searchs.page = this.maxPage;
                    return;
                }
                this.req();
            },
            getTimeFormat: function (val) {
                var result = val.split(" ");
                return result[0].replace(/-/g, "/");
            },
            serStarId: function (star) {

                var html = '';
                var zs = star * 10 / 10; //整数部分
                var xs = star * 10 % 10; //小数部分
                for (var i = 1; i < 6; i++) { //循环5次
                    if (i <= zs) {
                        html += "<img style='width: 18px;height: 18px;margin-left: 10px' src='/image/supplies/icon/star-full.png'>";
                    } else {
                        if (5 == xs) { //余数==5 显示 半星
                            html += "<img style='width: 18px;height: 18px;margin-left: 10px' src='/image/supplies/icon/star-full.png'>";
                            xs = 0;
                        } else { //否则 显示空星
                            html += "<img style='width: 18px;height: 18px;margin-left: 10px' src='/image/supplies/icon/star-null.png'>";
                        }
                    }
                }
                return html;
            }
        },
        mounted: function () {
            this.req();
            this.ini();
        }
    });

    /*
    * @description : 类型选择的按钮
    * @params:
    * @author : peng huaneng
    * @date : 2018/1/19 10:07
    */
    var flag = 0; //用于改变下拉 上拉 样式
    function intiBnt() {
        $(".check-btn").on("click", function () {
            $("#span1").addClass("fa-caret-down");
            $("#span1").removeClass("fa-caret-up");
            $("#span2").addClass("fa-caret-down");
            $("#span2").removeClass("fa-caret-up");
            $("#span3").addClass("fa-caret-down");
            $("#span3").removeClass("fa-caret-up");
            $("#span4").addClass("fa-caret-down");
            $("#span4").removeClass("fa-caret-up");
            //修改图标
            $(this).find("span").each(function () {
                $(this).addClass("fa-caret-up");
                $(this).removeClass("fa-caret-down");
            });
            //显示列表
            $(this).parent("li").find("div").each(function () {
                $(this).css("display", "block");
            });
            $(this).parent("li").siblings("li").each(function () {
                $(this).find("div").each(function () {
                    $(this).css("display", "none");
                })
            })
        });
        //按下确定键
        $(".yesBtn").on("click", function () {
            $(this).parent("div").css("display", "none");
            $(this).parent("div").prev().css("display", "none");
            flag = 0;
            $("#span1").addClass("fa-caret-down");
            $("#span1").removeClass("fa-caret-up");
            $("#span2").addClass("fa-caret-down");
            $("#span2").removeClass("fa-caret-up");
            $("#span3").addClass("fa-caret-down");
            $("#span3").removeClass("fa-caret-up");
            $("#span4").addClass("fa-caret-down");
            $("#span4").removeClass("fa-caret-up");
        });
        $(".select_a").on("click", function () {
            var divId = $(this).attr("click_div");
            $(".select_a_div_triangle").css("display", "none");
            $(".select_a_div").css("display", "none");
            $("#" + divId).css("display", "block");
            $("#" + divId).prev().css("display", "block");
        });
    }

</script>
</html>